<script lang="ts" setup>
import { UserFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'

const data = ref({
  serviceNum: 0,
})
</script>

<template>
  <div class="flex">
    <!-- 以下都是直接子元素，都会成为 flex item -->
    <span>我是 span</span>
    <p>我是 p 标签</p>
    <img alt="no image" src="/public/favicon.ico" />
    <button>按钮</button>
    <!-- Vue 组件，只要是直接子元素 -->
  </div>

  <div class="flex-container">
    裸文本
    <!-- 会被识别为弹性项目，但不推荐！ -->
    <span>包裹后的文本</span>
    <!-- 推荐写法 -->
  </div>

  <el-card body-style="display:flex;justify-content: space-evenly;" shadow="hover">
    <el-icon :size="40" class="no-inherit" color="#66b1ff">
      <UserFilled />
    </el-icon>
    <p class="num">租户数 : {{ data.serviceNum }}</p>
  </el-card>
</template>

<style scoped>
.flex {
  display: flex;
  padding: 15px;
  border: 4px solid #ccc;
  justify-content: space-evenly;
}
</style>
